<template>
  <div class="loading flexBox" v-if="isShow">
      <ul class="wrap color-A j_a_box">
      <li class="k-line k-lineA-1"></li>
      <li class="k-line k-lineA-2"></li>
      <li class="k-line k-lineA-3"></li>
      <li class="k-line k-lineA-4"></li>
      <li class="k-line k-lineA-5"></li>
  </ul>
  </div>
</template>

<script>
export default {
    data() {
        return {
            isShow: false
        }
    },
    methods:{
        // show() {
        //     this.isShow = true;
        // },
        // close() {
        //     this.isShow = false;
        // }
    }
}
</script>

<style>
.loading {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .7);
    z-index: 999;
}
.wrap {
    height: 100px;
    width: 100px;
}
.k-line {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 15px;
    /* margin-top: 20px; */
    background: #e94328;
}
@keyframes k-loading {
    50%{
        height: 40px;
    }
    100% {
        height: 15px;
    }
}
.k-lineA-1 {
    animation: k-loading 1.5s 0s infinite;
}
.k-lineA-2 {
    animation: k-loading 1.5s .3s infinite;
}
.k-lineA-3 {
    animation: k-loading 1.5s 0.6s infinite;
}
.k-lineA-4 {
    animation: k-loading 1.5s .9s infinite;
}
.k-lineA-5 {
    animation: k-loading 1.5s 1.2s infinite;
}
</style>